<template>
  <div class="params-container">
    <bread :params1="'商品管理'" :params2="'参数列表'"></bread>

    <el-card class="box-card">
      <!-- 第一块 -->
      <el-alert title="警告提示的文案" type="warning" show-icon> </el-alert>
      <!-- 第二块 -->
      <div style="margin:20px  0">
        选择商品分类：<el-cascader
          :options="options"
          :props="props"
          v-model="selectedOptions"
          @change="handleChange"
        >
        </el-cascader
        >==={{ selectedOptions }}----{{ cat_id }}
      </div>

      <!-- 第三块 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 第一个  el-tab-pane -->
        <el-tab-pane label="动态参数" name="many">
          <el-button type="primary" :disabled="disabled">添加参数</el-button>
          <el-table :data="manyData" style="width: 100%">
            <el-table-column type="expand">
              <!-- /////// -->
              <template slot-scope="scope">
                <!-- v-if="!((scope.row.attr_vals[0] = '') &&(scope.row.attr_vals.length==1)) " -->
                <el-tag
                  closable
                  :disable-transitions="false"
                  @close="handleClose(scope.row, index)"
                  v-for="(item, index) in scope.row.attr_vals"
                  :key="index"
                >
                  {{ item }}
                </el-tag>

                <el-input
                  v-if="scope.row.inputVisible"
                  class="input-new-tag"
                  v-model="scope.row.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm(scope.row)"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput(scope.row)"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>

            <el-table-column type="index" label="#" width="180">
            </el-table-column>
            <el-table-column prop="attr_name" label="参数名称">
            </el-table-column>

            <el-table-column label="操作">
              <template>
                <el-button size="mini" @click="handleEdit()">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete()"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button type="primary" :disabled="disabled">添加属性</el-button>
          <el-table :data="onlyData" style="width: 100%">
            <el-table-column type="expand">
              <template>
                1111
              </template>
            </el-table-column>

            <el-table-column type="index" label="#" width="180">
            </el-table-column>
            <el-table-column prop="attr_name" label="参数名称">
            </el-table-column>

            <el-table-column label="操作">
              <template>
                <el-button size="mini" @click="handleEdit()">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete()"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { cate_api, params_api, addParamsput_api } from "@/api";
export default {
  data() {
    return {
      /* 需要的参数 */
      //级联选择显示的数据
      options: [],
      props: {
        children: "children",
        label: "cat_name",
        value: "cat_id",
        expandTrigger: "hover"
      },
      selectedOptions: [],
      selectedOptions2: [],
      //默认显示分类动态参数  many
      activeName: "many",
      //动态参数 数据数组
      onlyData: [],
      //  静态属性  数据数组
      manyData: [],
      disabled: true,
      //11111111
      inputValue: ""
    };
  },
  methods: {
    //级联选择器里面的数据列表
    async getCates() {
      const { data: res } = await cate_api({ type: 3 });
      // console.log(res.data, 5555555);
      this.options = res.data;
      // this.total = res.data.total;
    },
    //点击级联选择器
    handleChange(value) {
      //value 当前选择的分类的id
      // console.log(value, 11111111);
      if (this.selectedOptions.length != 3) {
        return null;
      }
      this.getParamsList();
    },
    //  封装发送请求获取  表格参数列表数据
    async getParamsList() {
      const { data: res } = await params_api({
        id: this.cat_id,
        sel: this.activeName
      });
      // console.log(res.data, 11111);
      // 循环data中的数据  给每一项添加一个属性  ====控制按钮和表单显示的
      res.data.forEach(item => {
        // console.log(res, 999999999);
        item.inputVisible = false;
        item.inputValue = "";

        item.attr_vals =
          item.attr_vals == "" ? [] : item.attr_vals.trim().split(" ");
      });

      //判断当前的//动态参数 还是 静态属性  并赋值
      this.disabled = false;
      if (this.activeName == "many") {
        this.manyData = res.data;
      } else {
        this.onlyData = res.data;
      }
    },
    //点击 动态参数和静态属性 按钮
    handleClick(tab, event) {
      // console.log(tab, event);
      //判断级联选择器的长度 调用计算属性方法cat_id  调用 表格参数列表数据 的函数
      if (this.cat_id) {
        this.getParamsList();
      }
    },
    //删除
    async handleClose(rows, index) {
      rows.attr_vals.splice(index, 1); //  删除你点击的哪一行
      const { data: res } = await addParamsput_api({
        id: this.cat_id,
        attrId: rows.attr_id,
        attr_name: rows.attr_name,
        attr_sel: this.activeName,
        attr_vals: rows.attr_vals.join(" ")
      });
    },
    //点击切换input框
    showInput(rows) {
      rows.inputVisible = !rows.inputVisible;
      // 点击自动获取焦点
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    //input失去焦点
    async handleInputConfirm(rows) {
      rows.inputVisible = !rows.inputVisible;

      // console.log(rows, 4444444);
      //判断表单输入的值 并获取
      if (rows.inputValue.trim() != "") {
        // let attr_vals = [...rows.attr_vals, rows.inputValue].join(" ");
        // console.log(attr_vals, 3333333333);
        // rows.attr_vals = [...rows.attr_vals, rows.inputValue];
        var attr_vals = [...rows.attr_vals, rows.inputValue].join(" ");

        rows.attr_vals.push(rows.inputValue);
        // console.log(rows, 3333333333);
        //发送请求
        const { data: res } = await addParamsput_api({
          id: this.cat_id,
          attrId: rows.attr_id,
          attr_name: rows.attr_name,
          attr_sel: this.activeName,
          attr_vals: attr_vals
        });
        // console.log(res, 5555555);
        //清空表单的原始数据
        rows.inputValue = "";
        rows.inputVisible = false;
      }
    },
    handleDelete() {}
  },
  created() {
    this.getCates();
  },
  computed: {
    //获取商品分类id  计算属性  selectedOptions商品分类id的数组
    cat_id() {
      if (this.selectedOptions.length != 3) {
        return null;
      } else {
        return this.selectedOptions[this.selectedOptions.length - 1];
      }
    }
  }
};
</script>
<style scoped lang="less">
.params-container {
  .box-card {
    margin: 20px 0;
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
}
</style>
